<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>影刀商城</title>
    <link rel="stylesheet" href="/CSS/影刀商城/iconfont.css">

    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            display: grid;
            grid-template-columns: 200px 1fr;
        }
        aside{
            min-height: 100vh;
            background-color: #001529;
        }
        main{
            background-color:white;
        }
        .head_icon{
            margin-top: 30px;
            display: flex;
            gap: 30px;
        }
        .aside_nav li{
            width: 100%;
            height: 30px;
            /* line-height: 80px; */
            margin-top: 30px;
            list-style-type: none;

        }
        .aside_nav li a{
            font-size: 14px;
            padding-left:30px ;
            color:white;
            text-decoration: none;
        }
        .aside_nav li a:hover{
            color: #ff525b;
            transition: 0.3s;
        }
        

        .head_nav{
            width: 100%;
        }
        .shouqi{
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
        }
        .shouqi:hover+.aside_nav{
            display: none;
        }
        .nav_right{
            display: flex;
            gap: 50px;
        }
        .zhuye{
            margin-left: 30px;
            display: flex;
            flex-direction: column;
            margin-top: 25px;
            gap: 10px;
        }
        .zhuye p{
            font-size: 14px;
        }
        .zhuye h5{
            font-size: 20px;
        }
        .main_container{
            margin-left: 25px;
            margin-top: 30px;
            min-width: 100%;
            min-height: 100vh;
            box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.3);
        }
        .text{
            display: flex;
            gap: 30px;
        }
        .text span{
            margin-left: 20px;
            margin-top: 30px;
        }
        .text input{
            height: 30px;
            outline: none;
            padding: 4px 11px;
            color: rgba(0, 0, 0, .65);
            font-size: 14px;
            line-height: 1.5;
            background-color: #fff;
            background-image: none;
            border: 1px solid #d9d9d9;
            border-radius: 3px;     
        }
        .text button{
            margin-top: 30px;
            width: 80px;
            color: white;
            background-color: #ff525b;
            border: none;
            letter-spacing: 5px;
            border-radius: 10%;
        }
        .down_load{
            display: flex;
            flex-direction: row-reverse;
        }
        .down_load button{
            margin-right: 50px;
            width: 80px;
            height: 35px;
            color: white;
            background-color: #ff525b;
            border: none;
            letter-spacing: 5px;
            border-radius: 10%;
        }
        .category{
            margin-left: 20px;
            margin-top: 15px;
            display: grid;
            grid-template-columns:repeat(6,1fr);
            border-bottom: 2px solid #e8e8e8;
        }
        .category p{
            /* margin-left: 6px; */
            font-size: 13px;
            color: rgba(0, 0, 0, .85);
            font-weight: 500;
            
        }
        .info{
            padding: 10px;
            margin-left: 20px;
            font-size: 14px;
            color: rgba(0, 0, 0, .65);
            margin-top: 15px;
            display: grid;
            grid-template-columns: repeat(6,1fr);
            border-bottom: 1px solid #e8e8e8;
        }
        .info h5{
            color: #ff525b;
        }

    </style>
</head>
<body>
    <aside>
        <div class="head_icon">
            <span class="iconfont icon-Fantasy"></span>
            <span class="iconfont icon-word_tld"></span>
        </div>

        <ul class="aside_nav">
            <li><a href="">工作台</a></li>
            <li><a href="">物流拦截</a></li>
            <li><a href="">退款管理</a></li>
            <li><a href="">小红薯</a></li>
            <li><a href="">订单管理</a></li>
            <li><a href="">网页操作</a></li>
            <li><a href="">元素编辑</a></li>
            <li><a href="">数据录入</a></li>
            <li><a href="">影刀FUN叉岛</a></li>
        </ul>
    </aside>

    <main>
        <div class="head_nav">
            <div class="shouqi">
                <ul class="nav_left">
                    <span class="iconfont icon-shouqi"></span>
                </ul>
                <ul class="nav_right">
                    <span class="iconfont icon-administrator"></span>
                    <span class="iconfont icon-zhanghuguanli"></span>
                    
                </ul>
            </div>

            <div class="zhuye">
                <p>主页 / 订单管理</p>
                <h5>订单管理</h5>
            </div>
        </div>

        <div class="main_container">
            <div class="text">
                <span>订单编号: <input type="text" placeholder="订单编号"></span>
                <span>商品名称: <input type="text" placeholder="商品名称"></span>
                <button type="button">查询</button>
            </div>

            <div class="down_load">
                <button type="button">下载</button>
            </div>


            <div class="category">
                <p>订单编号</p>
                <p>商品名称</p>
                <p>金额</p>
                <p>日期</p>
                <p>状态</p>
                <p>操作</p>
            </div>
            <div class="info">
                <p>U2021062310545</p>
                <h5>短袖T恤</h5>
                <p>¥9.99</p>
                <p>2025-3-14 20:19:28</p>
                <p>完成</p>
                <h5>确认发货</h5>
            </div>



            <div class="info">
                <p>U2021062310545</p>
                <h5>短袖T恤</h5>
                <p>¥9.99</p>
                <p>2025-3-14 20:19:28</p>
                <p>完成</p>
                <h5>确认发货</h5>
            </div>



            <div class="info">
                <p>U2021062310545</p>
                <h5>短袖T恤</h5>
                <p>¥9.99</p>
                <p>2025-3-14 20:19:28</p>
                <p>完成</p>
                <h5>确认发货</h5>
            </div>



            <div class="info">
                <p>U2021062310545</p>
                <h5>短袖T恤</h5>
                <p>¥9.99</p>
                <p>2025-3-14 20:19:28</p>
                <p>完成</p>
                <h5>确认发货</h5>
            </div>



            <div class="info">
                <p>U2021062310545</p>
                <h5>短袖T恤</h5>
                <p>¥9.99</p>
                <p>2025-3-14 20:19:28</p>
                <p>完成</p>
                <h5>确认发货</h5>
            </div>



            <div class="info">
                <p>U2021062310545</p>
                <h5>短袖T恤</h5>
                <p>¥9.99</p>
                <p>2025-3-14 20:19:28</p>
                <p>完成</p>
                <h5>确认发货</h5>
            </div>



            <div class="info">
                <p>U2021062310545</p>
                <h5>短袖T恤</h5>
                <p>¥9.99</p>
                <p>2025-3-14 20:19:28</p>
                <p>完成</p>
                <h5>确认发货</h5>
            </div>



            <div class="info">
                <p>U2021062310545</p>
                <h5>短袖T恤</h5>
                <p>¥9.99</p>
                <p>2025-3-14 20:19:28</p>
                <p>完成</p>
                <h5>确认发货</h5>
            </div>



            <div class="info">
                <p>U2021062310545</p>
                <h5>短袖T恤</h5>
                <p>¥9.99</p>
                <p>2025-3-14 20:19:28</p>
                <p>完成</p>
                <h5>确认发货</h5>
            </div>



            <div class="info">
                <p>U2021062310545</p>
                <h5>短袖T恤</h5>
                <p>¥9.99</p>
                <p>2025-3-14 20:19:28</p>
                <p>完成</p>
                <h5>确认发货</h5>
            </div>



            <div class="info">
                <p>U2021062310545</p>
                <h5>短袖T恤</h5>
                <p>¥9.99</p>
                <p>2025-3-14 20:19:28</p>
                <p>完成</p>
                <h5>确认发货</h5>
            </div>

            <div class="info">
                <p>U2021062310545</p>
                <h5>短袖T恤</h5>
                <p>¥9.99</p>
                <p>2025-3-14 20:19:28</p>
                <p>完成</p>
                <h5>确认发货</h5>
            </div>



            <div class="info">
                <p>U2021062310545</p>
                <h5>短袖T恤</h5>
                <p>¥9.99</p>
                <p>2025-3-14 20:19:28</p>
                <p>完成</p>
                <h5>确认发货</h5>
            </div>



            <div class="info">
                <p>U2021062310545</p>
                <h5>短袖T恤</h5>
                <p>¥9.99</p>
                <p>2025-3-14 20:19:28</p>
                <p>完成</p>
                <h5>确认发货</h5>
            </div>



            <div class="info">
                <p>U2021062310545</p>
                <h5>短袖T恤</h5>
                <p>¥9.99</p>
                <p>2025-3-14 20:19:28</p>
                <p>完成</p>
                <h5>确认发货</h5>
            </div>



            <div class="info">
                <p>U2021062310545</p>
                <h5>短袖T恤</h5>
                <p>¥9.99</p>
                <p>2025-3-14 20:19:28</p>
                <p>完成</p>
                <h5>确认发货</h5>
            </div>
        </div>

    </main>


</body>
</html>